<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="../favicon.ico" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script> 
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
    class RefPractice extends React.Component {
        showDate = ()=> {
            alert(this.refs.input1.value);
        }
        withBlur = ()=> {
            const {input2} = this.refs
            alert(input2.value)
        }
        render() {
            return(
                <div>
                    <input ref="input1" type="text" placeholder="点按钮提示"/><br/>
                    <button ref="btn" onClick={this.showDate}>点我提示左侧</button>    <br/>
                    <input ref="input2" onBlur={this.withBlur} type="text" placeholder="失去焦点提示"/>

                </div>              
            )
        }
    }

    ReactDOM.render(<RefPractice/>,document.getElementById('root'))

    
    </script>
  </body>
</html>
